<template>
	<view>
		<u-popup :show="ruleShow" mode="center" bgColor="transparent">
			<view class="tanchuang_box" :style="{backgroundImage:' url(' + bgImg + ')'}">
				<view class="title_box" :style="{backgroundImage:' url(' + bgTitle + ')'}"></view>
				<view class="close_guanbi_box" @click="hidePopup" :style="{backgroundImage:' url(' + gbImg + ')'}">
				</view>
				<view class="content_box" v-html="rulecontent">
				</view>
			</view>

		</u-popup>

	</view>
</template>
<script>
	export default {
		props: {
			ruleShow: {
				type: Boolean,
				default: false,
			},
			rulecontent: {
				type: String,
				default: ''
			},
			bgImg: {
				type: String,
				default: 'https://morgan.dingxians.cn/static/xin/20.png'
			},
			bgTitle: {
				type: String,
				default: 'https://morgan.dingxians.cn/static/yfs/rule.png'
			},
			gbImg: {
				type: String,
				default: 'https://morgan.dingxians.cn/static/recordDrwa/3.png'
			}
		},
		methods: {
			hidePopup() {
				this.$emit('handlePopup')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.tanchuang_box {
		width: 580rpx;
		height: 700rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 29rpx;
		position: relative;

		.title_box {
			width: 402rpx;
			height: 66rpx;
			margin: auto;
			background-size: 100% 100%;
			margin-bottom: 40rpx;
		}

		.close_guanbi_box {
			width: 60rpx;
			height: 60rpx;
			background-size: 100% 100%;
			position: absolute;
			top: 36rpx;
			right: 20rpx;
		}

		.content_box {
			width: 454rpx;
			margin: auto;
			height: 560rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			overflow: hidden;
			overflow-y: auto;
		}
	}
</style>